<template>
  <div class="container">
    <div class="top">
      <div class="img">
        <van-image
            round
            width="100"
            height="100"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </div>
      <div class="info">
        <div class="name">
          余炜
        </div>
        <div class="tel">
          <van-icon name="phone-o"/>
          18791995155
        </div>
      </div>
    </div>

    <div class="card">
     <div class="text">
       总资产 (积分) <van-icon name="browsing-history-o" />
     </div>
      <div class="score">
       124234
      </div>
    </div>

    <div class="box">
      <div class="item" @click="change">
        <van-icon name="point-gift-o" />
        积分记录
      </div>

       <div class="item" @click="game">
       <van-icon name="coupon-o" />
        游戏记录
      </div>

       <div class="item" @click="code">
        <van-icon name="label-o" />
        积分兑换
      </div>
    </div>

    <div class="chat">
 <van-floating-bubble v-model:offset="offset" axis="xy" icon="chat"  @offset-change="onOffsetChange" />

    </div>

  </div>
</template>

<script setup>
import {ref,reactive} from "vue"
import{useRouter} from "vue-router";
const router = useRouter()
const change = ()=>{
  router.push("/change")
}
const game = ()=>{
  router.push("/game")
}
const code = ()=>{
  router.push("/game")
}

const offset = reactive({ x: 358, y: 778 });
  const onOffsetChange = (e)=>{
  console.log(e)

}
</script>

<style scoped lang="less">
.container {


  .top {
    width: 90%;
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    justify-content: start;

    .img {
      width: 100px;
      height: 100px;

    }

    .info {
      text-align: start;
      margin: 0 20px;

      .name {
        font-size: 30px;
        font-weight: 700;
        line-height: 50px;
        margin-top: 20px
      }
    }

  }

  .card{
    width: 90%;
   background: linear-gradient(180deg, #409EFF, #85b3f8);
    height: 200px;
    z-index: 10;
    border-radius: 10px;
    text-align: start;

    .text,
    .score{
      color:#fff;
      font-size: 20px;
      margin:20px;
      font-weight: 700;
    }
    .score{
      font-size: 30px;
    }
  }
  .card::after{
    width: 89%;
    content: "";
    display: block;
    position: relative;
    background-color: rgba(255,255,255,.3);
    height: 15px;
    bottom:-68px;
    margin:0 auto;
    border-radius: 0 0 10px 10px;

  }
   .card::before{
    width: 94%;
    content: "";
    display: block;
    position: relative;
    background-color: rgba(108, 163, 246,.3);
    height: 15px;
    bottom:-200px;
    margin:0 auto;
    border-radius: 0 0 10px 10px;

  }

  .box{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin:40px auto;
    width: 90%;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    .item{
      display: flex;
      flex-direction: column;
      font-size: 17px;
    }
  }
}


</style>